<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./vue.js"></script>
    <div id="app">
        <!--3、使用子组件-->
        <App></App>
    </div>

    <script>
        //创建全局组件 第一个是组建名 第二个是配置
        // 只要创建了全局组件，可以在任意地方使用(template)
        Vue.component('Vheader',{
            template:`
            <div>
                我是导航组件
            </div>
            `,
        })

        Vue.component('Vaside',{
            template:`
            <div>
                我是侧边栏组件
            </div>
            `,
        })

        const Vcontent = {
            data(){
                return {

                }
            },
            template:`
                <div>
                    我是内容组件
                </div>
            `,
        }

        // App组件
        // 1. 创建组件
        // 注意：在组件中这个data必须是一个函数，返回一个对象
        const App = {
            data() {
                return {
                    msg: '我是App组件',
                }
            },

            components:{
                Vcontent
            },

            template: `
               <div>
                    <Vheader></Vheader>
                    <div>
                        <Vaside />
                        <Vcontent />
                    </div>
               </div>
            `,
            methods: {
                handleClick() {
                    this.msg = '学习局部组件';
                }
            },
        }
        new Vue({
            el: '#app',
            data: {

            },
            components:{
                // 2. 挂载子组件
                App
            }

        })
    </script>
</body>
</html>